import React, { useState, useCallback, useRef } from 'react';
import { View } from 'react-native';

import { Scrollpicker, BottomModal } from 'beeshell';
import Button from './Button';
import Text from './Text';

export default function CustomPicker(props) {
  let indices = [0, 0];

  const [btnVal, setBtnVal] = useState('');

  const { list, onValueSelect, dftBtnValue } = props;


  const bottomModal = useRef(null);

  // with state, btnVal
  const setButtonLabel = useCallback(() => {
    const { label, value } = list[indices[0]][indices[1]];
    onValueSelect(value);
    setBtnVal(label);
  }, [indices, list, onValueSelect]);

  return (
    <>
      <Button
        shadow
        onPress={() => {
          bottomModal.current.open();
        }}
      >
        <Text semibold center gray={btnVal === ''}>{btnVal || dftBtnValue}</Text>
      </Button>
      <BottomModal
        ref={bottomModal}
        title="请选择"
        cancelable
        rightCallback={setButtonLabel}
      >
        <View style={{ paddingVertical: 0 }}>
          <Scrollpicker
            style={{ paddingHorizontal: 0 }}
            list={list}
            onChange={(cIndex, rIndex) => {
              indices = [cIndex, rIndex];
            }}
          />
        </View>
      </BottomModal>
    </>
  );
}
